<template>
  <Horizontal
    v-if="mode === 'horizontal'"
    v-bind="$attrs"
    :div-value="divValue"
    @update:divValue="$emit('update:divValue', $event)"
    :left-min="leftMin"
    :right-min="rightMin"
  >
    <template v-slot:left>
      <slot name="left"></slot>
    </template>
    <template v-slot:right>
      <slot name="right"></slot>
    </template>
    <template v-slot:trigger>
      <slot name="trigger"></slot>
    </template>
  </Horizontal>

  <Vertical
    v-else
    v-bind="$attrs"
    :div-value="divValue"
    @update:divValue="$emit('update:divValue', $event)"
    :top-min="topMin"
    :bottom-min="bottomMin"
  >
    <template v-slot:top>
      <slot name="top"></slot>
    </template>
    <template v-slot:bottom>
      <slot name="bottom"></slot>
    </template>
    <template v-slot:trigger>
      <slot name="trigger"></slot>
    </template>
  </Vertical>
</template>

<script>
// 普通 <script>, 在模块范围下执行(只执行一次)
// 声明额外的选项
export default {
  name: 'Split',
}
</script>

<script setup>
import {defineProps} from 'vue'
import Horizontal from './components/Horizontal'
import Vertical from './components/Vertical'
import { oneOf } from './utils/index'

defineProps({
  divValue: {
    type: [Number, String],
    default: 0.5
  },
  mode: {
    validator (value) {
      return oneOf(value, ['horizontal', 'vertical']);
    },
    default: 'horizontal'
  },
  leftMin: {
    type: [Number, String],
    default: '40px'
  },
  rightMin: {
    type: [Number, String],
    default: '40px'
  },
  topMin: {
    type: [Number, String],
    default: '40px'
  },
  bottomMin: {
    type: [Number, String],
    default: '40px'
  }
})
</script>
